<template>
  <div>
    <ul class="btnList">
      <li @click="operate('register')">
        <p>{{ $t("Registration") }}</p>
        <span>{{ $t("Registration") }}</span>
      </li>
      <li @click="operate('recharge')">
        <p>{{ $t("FastRecharge") }}</p>
        <span>{{ $t("FastRecharge") }}</span>
      </li>
      <li @click="operate('exchange')">
        <p>{{ $t("ChipExchange") }}</p>
        <span>{{ $t("PROMOTIONHALL") }}</span>
      </li>
      <li @click="operate('withdrawal')">
        <p>{{ $t("withdrawal") }}</p>
        <span>{{ $t("withdrawal") }}</span>
      </li>
    </ul>
    <div class="tips">
      <div>
        <el-divider />
      </div>
      <span>{{ $t("hotGames") }}</span>
      <div>
        <el-divider />
      </div>
    </div>
    <div v-if="resultList.length > 0">
      <div
        v-for="(group, index) of resultList"
        :key="index"
        class="games"
        :class="['grid', gridClass(group.number)]"
      >
        <template v-if="group.number === 105">
          <div
            v-for="(v1, index) in groupedLists(group.list, 5)"
            :key="index"
            class="gameList"
          >
            <template v-if="v1[0]">
              <div
                v-for="(val, index) of v1[0]"
                :key="index"
                class="item large-item"
                @click="start(val.id)"
              >
                <img :src="val.icon" alt="icon" />
                <div class="text">{{ val.name }}</div>
              </div>
            </template>
            <template v-if="v1[1]">
              <div class="small-items">
                <div
                  v-for="(val, index) of v1[1]"
                  :key="index"
                  @click="start(val.id)"
                  class="small-item"
                >
                  <div class="text">{{ val.name }}</div>
                  <img :src="val.icon" alt="icon" />
                </div>
              </div>
            </template>
          </div>
        </template>
        <template
          v-if="
            group.number > 100 && group.number !== 105 && group.number !== 104
          "
        >
          <div v-for="(val, index) of group.list" class="gameList" :key="index">
            <div class="gameBox" @click="start(val.id)">
              <img :src="val.icon" />
              <div class="text">{{ val.name }}</div>
            </div>
          </div>
        </template>
        <template v-if="group.number == 104">
          <div class="gameList1">
            <div
              v-for="(val, index) of group.list"
              :key="index"
              class="gameBox1"
              @click="start(val.id)"
            >
              <div class="text">{{ val.name }}</div>
              <img :src="val.icon" />
            </div>
          </div>
        </template>
      </div>
    </div>
    <p v-else class="noData">{{ $t("noData") }}</p>
    <div class="tips">
      <div>
        <el-divider />
      </div>
      <span>{{ $t("homePlateform") }}</span>
      <div>
        <el-divider />
      </div>
    </div>
    <div class="index_layer3__3AASE">
      <div
        class="wow intp fadeInRight layer3_box__1HVAT"
        data-wow-delay="0"
        style="visibility: visible"
      >
        <div class="icon__38vMD">
          <img
            src="@/assets/img/games/slotsgame.png"
            alt="bg"
            class="bg__18TxW"
          />
          <img
            src="@/assets/img/games/game4.a61ff3e0.png"
            alt="bg"
            class="pic__3_Q_-"
          />
        </div>
        <div class="text__1B74M">
          <div class="text_box__1aUt3">
            <div class="text_Top__3SVaS">
              <p>
                {{ $t("slotGameTips") }}
              </p>
              <router-link class="playBtn__sjtud" to="/games/slots">{{
                $t("PLAY")
              }}</router-link>
            </div>
            <div class="text_Bottom__2SKFL" v-if="slotGames.length > 0">
              <ul>
                <li v-for="(item, index) of slotGames" :key="index">
                  <router-link :to="{ name: 'Slot' }">
                    <img :src="item.icon" alt="icon" />
                    <div class="bt__3i7NT">{{ item.name }}</div>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div
        class="wow intp fadeInLeft layer3_box__1HVAT"
        data-wow-delay="0"
        style="visibility: visible"
      >
        <div class="icon__38vMD">
          <img
            src="@/assets/img/games/chessgame.png"
            alt="bg"
            class="bg__18TxW"
          />
          <img
            src="@/assets/img/games/game5.ee55a2b1.png"
            alt="bg"
            class="pic__3_Q_-"
          />
        </div>
        <div class="text__1B74M">
          <div class="text_box__1aUt3">
            <div class="text_Top__3SVaS">
              <p>
                {{ $t("chessGameTips") }}
              </p>
              <router-link class="playBtn__sjtud" to="/games/chess">{{
                $t("PLAY")
              }}</router-link>
            </div>
            <div class="text_Bottom__2SKFL" v-if="chessGames.length > 0">
              <ul>
                <li v-for="(item, index) of chessGames" :key="index">
                  <router-link :to="{ name: 'Chess' }">
                    <img :src="item.icon" alt="icon" />
                    <div class="bt__3i7NT">{{ item.name }}</div>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="index_layer4__35hF5">
      <ul>
        <li
          class="wow intp fadeInUp"
          data-wow-delay="0.6s"
          style="visibility: visible; animation-delay: 0.6s"
        >
          <router-link to="/games/fish"
            ><div class="bg__18TxW bg6__1KhcW"></div>
            <div class="pic__3_Q_- pic6__2JOhN"></div
          ></router-link>
        </li>
      </ul>
    </div>
    <Login
      :loginFormVisible="loginFormVisible"
      @closeDialog="loginFormVisible = false"
      @register="$emit('toRegister')"
      :isShowToRegister="true"
    />
    <Loading v-if="listLoading" />
  </div>
</template>
<script>
import {
  httpEnterGame,
  httpHomeRecommend,
  httpHomeList,
  httpGameClass,
} from "@/http/api";
import Login from "../pcComponents/login.vue";
import Loading from "@/components/loading.vue";
export default {
  name: "Main",
  components: {
    Login,
    Loading,
  },
  data() {
    return {
      listAjax: false,
      listLoading: false,
      list: [], //列表数据
      list1: [],
      pages: {
        // 分页信息
        page: 1,
        total: 0,
        total_page: 0,
        nodata: false,
      },
      startAjax: false,
      loginFormVisible: false,
      slotGames: [],
      chessGames: [],
      gameTypeList: [],
    };
  },
  computed: {
    resultList() {
      let result = this.list.filter((item) => {
        return item.number > 100;
      });
      return result;
    },
  },
  async mounted() {
    this.listLoading = true;
    await httpGameClass().then((res) => {
      if (res.code == 0) {
        let arr = res.data.filter((item) => item.id != 0) || [];
        this.gameTypeList = arr;
        this.listLoading = false;
      } else {
        this.listLoading = false;
      }
    });
    this.onLoadList();
    this.getSlotGames();
    this.getChessGames();
  },
  methods: {
    gridClass(number) {
      if (number > 100 && number != 101) {
        let str = number.toString();
        return `columns-${str[str.length - 1]}`;
      }
    },

    groupedLists(list, num, type) {
      const groups = [];
      let result = [];
      for (let i = 0; i < list.length; i += num) {
        groups.push(list.slice(i, i + num));
      }
      if (type == "left") {
        result = [];
        for (let i = 0; i < groups.length; i++) {
          result.push([groups[i].slice(0, 4), groups[i].slice(4)]);
        }
      } else {
        result = [];
        for (let i = 0; i < groups.length; i++) {
          result.push([groups[i].slice(0, 1), groups[i].slice(1)]);
        }
      }
      return result;
    },
    onLoadList() {
      this.getHttpHomeList();
      // this.getHttpSlotList();
    },
    // 游戏列表
    async getHttpHomeList() {
      let params = {
        page: 1,
        pagesize: 50,
      };
      this.listLoading = true;
      let res = await httpHomeRecommend(params);
      if (res.code == 0) {
        this.list = res.data || [];
        this.listLoading = false;
      } else {
        this.listLoading = false;
      }
    },
    async start(id) {
      if (!localStorage.getItem("TOKEN")) return this.$router.push("/register");
      if (this.startAjax) return;
      let params = {
        id,
      };
      this.startAjax = true;
      let res = await httpEnterGame(params);
      if (res.code == 0) {
        window.location.href = res.data.parameter.url;
      } else {
        this.$message.error(res.message);
      }
      this.startAjax = false;
    },
    operate(type) {
      // if (type == "register") {
      //   this.$emit("operate", type);
      // } else {
      //   if (!localStorage.getItem("TOKEN")) {
      //     this.loginFormVisible = true;
      //   } else {
      //     this.$emit("operate", type);
      //   }
      // }
      this.$emit("operate", type);
    },
    async getSlotGames() {
      let arr =
        this.gameTypeList.filter((item) => item.name === this.$t("Slot"))[0] ||
        [];
      if (arr.id) {
        this.slotGames = await this.getHomeGameList(arr.id);
      } else {
        this.slotGames = [];
      }
    },
    async getChessGames() {
      let arr =
        this.gameTypeList.filter((item) => item.name === this.$t("Chess"))[0] ||
        [];
      if (arr.id) {
        this.chessGames = await this.getHomeGameList(arr.id);
      } else {
        this.chessGames = [];
      }
    },
    async getHomeGameList(id) {
      let params = {
        page: 1,
        category_id: id,
      };
      this.listLoading = true;
      let res = await httpHomeList(params);
      let result = [];
      if (res.code == 0) {
        result = res.data.list.slice(0, 6) || [];
        this.listLoading = false;
      } else {
        this.listLoading = false;
      }
      return result;
    },
  },
};
</script>
<style lang="less" scoped>
.btnList {
  display: flex;
  justify-content: space-between;
  li {
    flex: 1;
    height: 90px;
    background: #fff;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    p {
      color: #333;
      font-weight: 500;
      padding-left: 10px;
    }
    span {
      font-size: 0.75rem;
      color: #cecdce;
      margin-top: 4px;
      padding-left: 10px;
    }
    &:first-child {
      background: url("../../assets/img/pcImg/top-banner-1.png") no-repeat;
      background-size: 100% 100%;
    }
    &:nth-child(2) {
      background: url("../../assets/img/pcImg/top-banner-2.png") no-repeat;
      background-size: 100% 100%;
    }
    &:nth-child(3) {
      background: url("../../assets/img/pcImg/top-banner-3.png") no-repeat;
      background-size: 100% 100%;
    }
    &:last-child {
      background: url("../../assets/img/pcImg/top-banner-4.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  h2 {
    color: #645041;
    font-weight: 500;
  }
}
.tips {
  width: 40%;
  margin: auto;
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    color: #b7c2bf;
  }
  div {
    width: 50px;
  }
}
.gameList {
  display: grid;
  grid-template-columns: repeat(auto-fill, 30%);
  justify-content: space-between;
  gap: 10px;
  li {
    width: 100%;
    height: 130px;
    background: #fff;
    margin: 10px 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 10px 10px 10px 20px;
    img {
      width: 40%;
      height: 100%;
      border-radius: 5px;
    }
  }
}
.index_layer3__3AASE {
  display: flex;
  justify-content: space-between;
  width: 1200px;
  margin: 0 auto;
  .layer3_box__1HVAT {
    width: 590px;
    border-radius: 24px;
    box-shadow: 0 0 15px #e5e6f9;
    .icon__38vMD {
      width: 100%;
      height: 200px;
      position: relative;
      .pic__3_Q_- {
        position: absolute;
        bottom: 0;
        right: 44px;
        transition: 0.5s;
      }
    }
    .text__1B74M {
      width: 100%;
      height: 215px;
      background: #fff;
      border-radius: 0 0 25px 25px;
      position: relative;
      z-index: 1;
      .text_box__1aUt3 {
        width: 560px;
        margin: 0 auto;
        .text_Top__3SVaS {
          width: 100%;
          height: 200px;
          padding: 20px 0;
          border-bottom: 1px solid #e5e6f9;
          overflow: hidden;
          display: flex;
          justify-content: start;
          align-items: center;
          p {
            float: left;
            line-height: 25px;
            color: #999;
            width: 385px;
            margin-right: 20px;
          }
          .playBtn__sjtud {
            width: 155px;
            height: 56px;
            border: 2px solid #513316;
            border-radius: 28px;
            color: #513316;
            font-size: 20px;
            line-height: 56px;
            text-align: center;
            float: right;
          }
        }
        .text_Bottom__2SKFL {
          width: 100%;
          ul {
            display: flex;
            justify-content: space-between;
            li {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              height: 100px;
              cursor: pointer;
              img {
                width: 45px;
                height: 45px;
                margin: 12px 0;
                // opacity: 0.4;
                margin: 0 auto;
              }
              .bt__3i7NT {
                color: #90aca4;
                font-size: 12px;
                margin-top: 10px;
                width: 60px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }
  .layer3_box__1HVAT {
    width: 590px;
    border-radius: 24px;
    box-shadow: 0 0 15px #e5e6f9;
    .icon__38vMD {
      width: 100%;
      height: 200px;
      position: relative;
    }
    .text__1B74M {
      width: 100%;
      height: 60%;
      background: #fff;
      border-radius: 0 0 25px 25px;
      position: relative;
      z-index: 1;
      .text_box__1aUt3 {
        width: 560px;
        margin: 0 auto;
        .text_Top__3SVaS {
          width: 100%;
          padding: 20px 0;
          border-bottom: 1px solid #e5e6f9;
          overflow: hidden;
        }
        .text_Bottom__2SKFL {
          width: 100%;
          ul {
            display: flex;
            justify-content: space-between;
            li {
              display: flex;
              justify-content: center;
              flex-direction: column;
              height: 100px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}

.grid {
  // width: 100%;
  // height: 100%;
  display: grid;
  gap: 10px;
  margin-bottom: 20px; /* 分离各个分类 */
}
.grid-3 {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px; /* 分离各个分类 */
}
.columns-1 {
  grid-template-columns: repeat(1, 1fr);
}

.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.columns-4 {
  // grid-template-columns: repeat(4, 1fr);
  .gameList1 {
    width: 100%;
    height: 100%;
    min-height: 180px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .gameBox1 {
      margin: 0;
      width: 24%;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: #fff;
      border-radius: 10px;
      padding: 0 10px;
      align-items: center;
      // position: relative;
      img {
        flex: 1;
        width: 60%;
        height: 86%;
        object-fit: cover;
        border-radius: 10px;
        // z-index: -1;
      }
      .text {
        flex: 1;
        width: 100%;
        height: 100%;
        color: #333;
        display: flex;
        // justify-content: center;
        align-items: center;
      }
    }
  }
}
.gameList {
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 20px;
  .gameBox {
    width: 100%;
    min-height: 300px;
    display: flex;
    justify-content: start;
    align-items: start;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 10px;
      // z-index: -1;
    }
    .text {
      width: 100%;
      color: #fff;
      background: rgba(0, 0, 0, 0.7);
      position: absolute;
      bottom: 0;
      left: 0;
      text-align: center;
      font-size: 0.85rem;
      line-height: 1.2rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
.large-item {
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 300px;
  margin-left: 2px;
  grid-row: span 2;
  position: relative;
  .text {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: 5px;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
  }
}

.small-items {
  width: 40%;
  height: 100%;
  min-height: 10rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  // justify-content: space-between;
  // margin-left: 2px;
  gap: 20px;
  .small-item {
    margin: 0;
    width: 47%;
    height: 47%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 10px;
    padding: 0 10px;
    // position: relative;
    img {
      flex: 1;
      width: 60%;
      height: 86%;
      object-fit: cover;
      border-radius: 10px;
      // z-index: -1;
    }
    .text {
      flex: 1;
      width: 100%;
      height: 100%;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.small-items1 {
  min-height: 5rem;
  width: 50%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  margin-left: 0.1rem;
  .small-item {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 10px;
      // z-index: -1;
    }
    .text {
      width: 100%;
      color: #fff;
      background: rgba(0, 0, 0, 0.7);
      position: absolute;
      bottom: 0;
      left: 0;
      text-align: center;
      font-size: 0.85rem;
      line-height: 1.2rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
.small-items2 {
  min-height: 10rem;
  width: 50%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  margin-left: 0.1rem;
  .small-item {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 10px;
      // z-index: -1;
    }
    .text {
      width: 100%;
      color: #fff;
      background: rgba(0, 0, 0, 0.7);
      position: absolute;
      bottom: 0;
      left: 0;
      text-align: center;
      font-size: 0.85rem;
      line-height: 1.2rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
.index_layer4__35hF5 {
  width: 1200px;
  margin: 75px auto;
  height: 200px;
  ul {
    display: flex;
    justify-content: space-between;
    height: 300px;
    li {
      position: relative;
      height: 200px;
      cursor: pointer;
      width: 100%;
      a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-tracks: start;
        align-items: center;
        .bg6__1KhcW {
          width: 100%;
          height: 100%;
          background: url(../../assets/img/games/WechatIMG40.jpg) no-repeat;
          background-size: 100% 100%;
          border-radius: 15px;
        }
        .pic6__2JOhN {
          width: 190px;
          height: 206px;
          background: url(../../assets/img/games/pic11.c5b273d5.png) no-repeat;
          position: absolute;
          right: 10px;
          bottom: 10px;
          transition: 0.5s;
        }
      }
    }
  }
}
</style>
